Action

昨天進度到了完成了一個 Reducer

但是我們知道要修改 Reducer 只能夠透過 Action

而在 ReasonReact 如何描述一個 Action？

type action = 
  | AddItem;

type item = {
  title: string,
  completed: bool
};

type state = {
  items: list(item)
}

let newItem = () => {title: "Click a button", completed: true};

let component = ReasonReact.reducerComponent("TodoApp");

let make = (_children) => {
  ...component,
  reducer: ((), _) => ReasonReact.NoUpdate,
  render: ({state: {items}}) => {
    let numItems = List.length(items);
    <div className="app">
      <div className="title">
        (str("What to do"))
        <button
          onClick=((evt) => AddItem)
        >
          (ReasonReact.string("Add something"))
        </button>
      </div>
      <div className="items"> (ReasonReact.string("Nothing")) </div>
      <div className="footer">
        (ReasonReact.string(string_of_int(numItems) ++ " items"))
      </div>
    </div>
  }
}

先幫昨天的範例加上一個 button 有一個 Event onClick

點擊後會 Js.log("didn't add something")

如果在 React 中這邊應該是要呼叫 this.setState

但是在 ReasonReact 中這需要兩個步驟

1. 建立一個 Action Type
2. 然後建立一個 Reducer 並且和 Action Type mapping